<template>
    <el-select :value="valueId" :clearable="clearable" :disabled="disabled" :placeholder="placeholder"
        style="width:100%" @input="sendChange">
        <el-option v-for="item in Options" :key="item.value" :label="item.label" :value="item.value">
            <span style="float: left">CODE:{{ item.code }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
        </el-option>
    </el-select>
</template>
<script>
    import * as shopService from '@/api/mall/shop'
    export default {
        name: 'ec-mall-select',
        props: {
            value: {
                type: String,
                required: false,
                default: () => {
                    return '0'
                }
            },
            pkGroup: {
                type: String,
                required: false,
                default: () => {
                    return ''
                }
            },
            pkOrg: {
                type: String,
                required: false,
                default: () => {
                    return ''
                }
            },
            placeholder: {
                type: String,
                default: "请选择店铺"
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            pkGroup(pkGroup) {
                this.requestSize = 0
                this.pkGroup = pkGroup
                this.valueId = ''
                // this.$emit('input', '')
                // console.log("当前选择部门中的的集团：" + pkGroup)
                // this.getRemoteData()
            },
            pkOrg(pkOrg) {
                this.requestSize = 0
                this.pkOrg = pkOrg
                this.valueId = ''
                // this.$emit('input', '')
                // console.log("当前选择部门中的的组织：" + pkGroup)
                this.getRemoteData()
            },
            value() {
                this.valueId = this.value
                if (this.valueId) {
                    this.initHandle()
                } else {
                    console.log("部门选择组件提示：未选择值")
                }
            }
        },
        data() {
            return {
                Options: [],
                timer: null,
                requestSize: 0,
                valueId: this.value, // 初始值
                clearable: true,
                accordion: true
            }
        },
        beforeDestroy() {
            this.Options = []
            clearInterval(this.timer)
        },
        mounted() {
            this.setTimer()
        },
        methods: {
            // 初始化值
            initHandle() {
                if (!this.valueId) {} else {

                }
            },
            sendChange(currentValue) {
                this.$emit("input", currentValue);
            },
            setTimer() {
                let that = this
                this.requestSize = 0
                this.timer = setInterval(() => {
                    // that.$isNotEmpty(that.pkGroup) && that.$isNotEmpty(that.pkOrg) && 
                    if (this.requestSize <
                        5) {
                        that.getRemoteData()
                    }
                }, 500)
            },
            // 查询字典项
            getRemoteData() {
                // console.log("加载部门树形组件")
                this.requestSize++
                this.Options = []
                // 构建查询条件
                var params = {
                    pkGroup: this.pkGroup,
                    pkOrg: this.pkOrg
                }
                shopService.getShopDict(params).then(data => {
                    this.requestSize = 100
                    this.Options = data;
                    this.initHandle()
                    clearInterval(this.timer)
                });
            }
        }
    }
</script>
<style scoped>

</style>